<template>
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
  <el-row :gutter="20">

    <el-col :span="8">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" placeholder="请输入姓名" />
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="出生日期" prop="dateOfBirth">
        <el-date-picker clearable
                        v-model="form.dateOfBirth"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择出生日期">
        </el-date-picker>
      </el-form-item>
    </el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="8">

      <el-form-item label="民族" prop="nationality">
        <el-input v-model="form.nationality" placeholder="请输入民族" />
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="联系电话" prop="phoneNumber">
        <el-input v-model="form.phoneNumber" placeholder="请输入联系电话" />
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="电子邮件" prop="email">
        <el-input v-model="form.email" placeholder="请输入电子邮件" />
      </el-form-item>
    </el-col>
  </el-row>
  <el-row :gutter="20">
    <el-col :span="8">
      <el-form-item label="住址" prop="address">
        <el-input v-model="form.address" placeholder="请输入住址" />
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="紧急联系人姓名" prop="emergencyContactName">
        <el-input v-model="form.emergencyContactName" placeholder="请输入紧急联系人姓名" />
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="紧急联系人电话" prop="emergencyContactPhone">
        <el-input v-model="form.emergencyContactPhone" placeholder="请输入紧急联系人电话" />
      </el-form-item>
    </el-col>
  </el-row>

  <el-row :gutter="20">
    <el-col :span="12">
      <el-form-item label="删除标志" prop="delFlag">
        <el-input v-model="form.delFlag" placeholder="请输入删除标志" />
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
      </el-form-item>
    </el-col>
  </el-row>
  <el-divider content-position="center">教育信息</el-divider>
  <el-row :gutter="10" class="mb8">
    <el-col :span="1.5">
      <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddYtEmployeeEducation">添加</el-button>
    </el-col>
    <el-col :span="1.5">
      <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteYtEmployeeEducation">删除</el-button>
    </el-col>
  </el-row>

  <el-table :data="ytEmployeeEducationList" :row-class-name="rowYtytEmployeeEducationIndex"  @selection-change="handleYtEmployeeEducationSelectionChange" ref="ytEmployeeEducation">
    <el-table-column type="selection" width="50" align="center" />
    <el-table-column label="序号" align="center" prop="index" width="50"/>
    <el-table-column label="学历" prop="educationalBackground" width="150">
      <template slot-scope="scope">
        <el-select v-model="scope.row.educationalBackground" placeholder="请选择你的学历">
          <el-option
            v-for="dict in dict.type.emp_educational_bg"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="学校" prop="school" width="150">
      <template slot-scope="scope">
        <el-input v-model="scope.row.school" placeholder="请输入学校" />
      </template>
    </el-table-column>
    <el-table-column label="专业" prop="profession" width="150">
      <template slot-scope="scope">
        <el-input v-model="scope.row.profession" placeholder="请输入专业" />
      </template>
    </el-table-column>
    <el-table-column label="毕业时间" prop="graduationDate" width="240">
      <template slot-scope="scope">
        <el-date-picker clearable v-model="scope.row.graduationDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择入职日期" />
      </template>
    </el-table-column>
    <el-table-column label="毕业照" prop="graduationPhotoUrl" width="150">
      <template slot-scope="scope">
        <image-upload v-model="scope.row.graduationPhotoUrl"/>
      </template>
    </el-table-column>
  </el-table>
  <el-divider content-position="center">入职信息信息</el-divider>
  <el-row :gutter="10" class="mb8">
    <el-col :span="1.5">
      <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddYtEmployeeEntryInfo">添加</el-button>
    </el-col>
    <el-col :span="1.5">
      <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteYtEmployeeEntryInfo">删除</el-button>
    </el-col>
  </el-row>
  <el-table :data="ytEmployeeEntryInfoList" :row-class-name="rowYtEmployeeEntryInfoIndex" @selection-change="handleYtEmployeeEntryInfoSelectionChange" ref="ytEmployeeEntryInfo">
    <el-table-column type="selection" width="50" align="center" />
    <el-table-column label="序号" align="center" prop="index" width="50"/>

    <el-table-column label="职工ID" prop="employeeId" width="150">

      <template slot-scope="scope">
        <el-input v-model="scope.row.employeeId" placeholder="请输入职工ID" />
      </template>
    </el-table-column>
    <el-table-column label="部门" prop="department" width="150">
      <template slot-scope="scope">
        <el-input v-model="scope.row.department" placeholder="请输入部门" />
      </template>
    </el-table-column>
    <el-table-column label="职位" prop="position" width="150">
      <template slot-scope="scope">
        <el-input v-model="scope.row.position" placeholder="请输入职位" />
      </template>
    </el-table-column>
    <el-table-column label="入职日期" prop="entryDate" width="240">
      <template slot-scope="scope">
        <el-date-picker clearable v-model="scope.row.entryDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择入职日期" />
      </template>
    </el-table-column>
    <el-table-column label="薪资" prop="salary" width="150">
      <template slot-scope="scope">
        <el-input v-model="scope.row.salary" placeholder="请输入薪资" />
      </template>
    </el-table-column>
  </el-table>



  <el-divider content-position="center">证件照信息</el-divider>
  <el-row :gutter="10" class="mb8">
    <el-col :span="1.5">
      <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddYtEmployeeDocuments">添加</el-button>
    </el-col>
    <el-col :span="1.5">
      <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteYtEmployeeDocuments">删除</el-button>
    </el-col>
  </el-row>

  <el-table :data="ytEmployeeDocumentsList" :row-class-name="rowYtEmployeeDocumentsIndex" @selection-change="handleYtEmployeeDocumentsSelectionChange" ref="ytEmployeeDocuments">
    <el-table-column type="selection" width="50" align="center" />
    <el-table-column label="序号" align="center" prop="index" width="50"/>

    <el-table-column label="证件类型" prop="documentType" width="150">
      <template slot-scope="scope">
        <el-select v-model="scope.row.documentType" placeholder="请选择证件类型">
          <el-option
            v-for="dict in dict.type.emp_document_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          ></el-option>
        </el-select>
      </template>&ndash;&gt;
    </el-table-column>-->
    <el-table-column label="编号" prop="number" width="150">
      <template slot-scope="scope">
        <el-input v-model="scope.row.number" placeholder="请输入编号" />
      </template>
    </el-table-column>


    <el-table-column label="附件" prop=""documentAttachmentPhotoUrl width="150">
      <template slot-scope="scope">
        <image-upload v-model="scope.row.documentAttachmentPhotoUrl"/>
      </template>
    </el-table-column>


    <el-table-column label="备注" prop="remark" width="150">
      <template slot-scope="scope">
        <el-input v-model="scope.row.remark" type="textarea" placeholder="请输入内容" />
      </template>
    </el-table-column>

  </el-table>
  <el-form-item>
    <el-button type="primary" size="mini" @click="submitForm">保存</el-button>
    <el-button type="danger" size="mini" @click="close">关闭</el-button>
  </el-form-item>
</el-form>



</template>
<script>

import {addBasicInfo, delBasicInfo, getBasicInfoByUserId, updateBasicInfo} from "@/api/employee/basicInfo";

export default {
  dicts: ['emp_document_type', 'emp_educational_bg'],
  props: {
    user: {
      type: Object
    }
  },
  data() {
    return {
      ytEmployeeDocumentsList: [],
      ytEmployeeEducationList: [],
      ytEmployeeEntryInfoList: [],
      userId: null,

      form: {},
      // 表单校验
      rules: {
        name: [
          { required: true, message: "姓名不能为空", trigger: "blur" }

        ],
      }
    };
  },
  watch: {
    user: {
      handler(user) {

        if (user != null && user.userId != null) {
          this.userId = user.userId;
          this.getEmployee();
          console.log('this.user',this.user)
        }
      },
      immediate: true
    }
  },


  created() {
  },
methods: {
    getEmployee(){
      getBasicInfoByUserId(this.userId).then(response => {

          this.form = response.data;
          console.log('response.data',response.data)


          this.ytEmployeeDocumentsList = response.data.ytEmployeeDocumentsList;
          // 教育背景json字符串转list
          if (response.data.education != null){
            this.ytEmployeeEducationList = JSON.parse(response.data.education);
            console.log('response.data.education',response.data.education)
          }


          this.ytEmployeeEntryInfoList = response.data.ytEmployeeEntryInfoList;
              console.log('this.ytEmployeeEntryInfoList',this.ytEmployeeEntryInfoList)
        }
      );
    },
  /** 证件照信息序号 */
  rowYtEmployeeDocumentsIndex({ row, rowIndex }) {
    row.index = rowIndex + 1;
  },
  /** 证件照信息添加按钮操作 */
  handleAddYtEmployeeDocuments() {
    let obj = {};
    obj.documentType = "";
    obj.number = "";
    obj.documentAttachmentPhotoUrl = "";
    obj.remark = "";
    this.ytEmployeeDocumentsList.push(obj);
  },
  /** 学历 */
  handleAddYtEmployeeEducation() {
    let obj = {};
    obj.educationalBackground = "";
    obj.school = "";
    obj.profession = "";
    obj.graduationDate = "";
    obj.graduationPhotoUrl = "";
    this.ytEmployeeEducationList.push(obj);
  },

  /** 删除按钮操作 */
  handleDelete(row) {
    const employeeIds = row.employeeId || this.ids;
    this.$modal.confirm('是否确认删除职工基本信息编号为"' + employeeIds + '"的数据项？').then(function() {
      return delBasicInfo(employeeIds);
    }).then(() => {
      this.getList();
      this.$modal.msgSuccess("删除成功");
    }).catch(() => {});
  },




  /** 证件照信息删除按钮操作 */
  handleDeleteYtEmployeeDocuments() {
    if (this.checkedYtEmployeeDocuments.length == 0) {
      this.$modal.msgError("请先选择要删除的证件照信息数据");
    } else {
      const ytEmployeeDocumentsList = this.ytEmployeeDocumentsList;
      const checkedYtEmployeeDocuments = this.checkedYtEmployeeDocuments;
      this.ytEmployeeDocumentsList = ytEmployeeDocumentsList.filter(function(item) {
        return checkedYtEmployeeDocuments.indexOf(item.index) == -1
      });
    }
  },
  handleDeleteYtEmployeeEducation(){
    if (this.checkedYtEmployeeEducation.length == 0) {
      this.$modal.msgError("请先选择要删除的学历数据");
    } else {
      const ytEmployeeEducationList = this.ytEmployeeEducationList;
      const checkedYtEmployeeEducation = this.checkedYtEmployeeEducation;
      this.ytEmployeeEducationList = ytEmployeeEducationList.filter(function(item) {
        return checkedYtEmployeeEducation.indexOf(item.index) == -1
      })
    }
  },
  /** 入职信息序号 */
  rowYtEmployeeEntryInfoIndex({ row, rowIndex }) {
    row.index = rowIndex + 1;
  },
  /** 教育信息序号 */
  rowYtytEmployeeEducationIndex({ row, rowIndex }){
    row.index = rowIndex + 1;
  },
  /** 入职信息添加按钮操作 */
  handleAddYtEmployeeEntryInfo() {
    let obj = {};
    obj.employeeId = "";
    obj.department = "";
    obj.position = "";
    obj.entryDate = "";
    obj.salary = "";
    obj.workExperience = "";
    obj.educationBackground = "";
    obj.remark = "";
    this.ytEmployeeEntryInfoList.push(obj);
  },
  /** 入职信息删除按钮操作 */
  handleDeleteYtEmployeeEntryInfo() {
    if (this.checkedYtEmployeeEntryInfo.length == 0) {
      this.$modal.msgError("请先选择要删除的入职信息数据");
    } else {
      const ytEmployeeEntryInfoList = this.ytEmployeeEntryInfoList;
      const checkedYtEmployeeEntryInfo = this.checkedYtEmployeeEntryInfo;
      this.ytEmployeeEntryInfoList = ytEmployeeEntryInfoList.filter(function(item) {
        return checkedYtEmployeeEntryInfo.indexOf(item.index) == -1
      });
    }
  },
  /** 复选框选中数据 */
  handleYtEmployeeDocumentsSelectionChange(selection) {
    this.checkedYtEmployeeDocuments = selection.map(item => item.index)
  },


  /** 复选框选中数据 */
  handleYtEmployeeEntryInfoSelectionChange(selection) {
    this.checkedYtEmployeeEntryInfo = selection.map(item => item.index)
  },

  handleYtEmployeeEducationSelectionChange(selection){
    this.checkedYtEmployeeEducation = selection.map(item => item.index)
  },
  /** 提交按钮 */
  submitForm() {
    this.$refs["form"].validate(valid => {
      if (valid) {
        this.form.ytEmployeeDocumentsList = this.ytEmployeeDocumentsList;

        //  教育背景list转json字符串
        this.form.education =JSON.stringify(this.ytEmployeeEducationList)
        console.log('教育背景list转json字符串',this.form.education)
        this.form.ytEmployeeEntryInfoList = this.ytEmployeeEntryInfoList;

        if (this.form.employeeId != null) {
          updateBasicInfo(this.form).then(response => {
            this.$modal.msgSuccess("修改成功");


          });
        } else {
          addBasicInfo(this.form).then(response => {
            this.$modal.msgSuccess("新增成功");

          });
        }
      }
    });
  },





  close() {
    this.$tab.closePage();
  }
}}



</script>
